<template>
  <div>
    <form-item :formItems="formItems" @screenConfirm="screenConfirm"></form-item>
    <div class="card bg-w border-r">
      <div class="btns clear">
        <a-button type="primary" size="middle" class="fr">编辑属性</a-button>
        <a-button type="primary" size="middle" class="fr">新建</a-button>
      </div>
      <a-config-provider :locale="zhCN">
        <ant-table :columns="columns" :data-source="tableData" :pagination="pagination">
          <template v-slot:bodyCell="{ scope }">
            <template v-if="scope.column.key === 'speedUpStatus'">
              <div class="form-txt">
                {{ scope.record.speedUpStatus }}
              </div>
            </template>
            <template v-else-if="scope.column.key === 'action'">
              <span style="width: 260px">
                <a-button type="link" @click="toDetail(scope.record.id)">查看</a-button>
                <a-button type="link" @click="toDetail(scope.record.id)">编辑</a-button>
              </span>
            </template>
            <template v-else>
              <div :title="scope.record[scope.column.key]" class="form-txt ellipsis">{{
                scope.record[scope.column.key]
              }}</div>
            </template>
          </template>
        </ant-table>
      </a-config-provider>
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: "memberAdmin"
});
</script>
<script setup>
import formItem from "@/components/form-item/index.vue";
import zhCN from "ant-design-vue/es/locale/zh_CN";
import { ref } from 'vue';
import { useRouter } from "vue-router";

const router = useRouter();

const formItems = ref([
  {
    label: "门店名称",
    key: "storeName",
    type: "input",
    value: "",
    placeholder: "请输入",
  },
  {
    label: "是否为虚拟店",
    key: "virtualStore",
    type: "select",
    value: null,
    placeholder: "请选择",
    list: [
      { key: 1, name: "是" },
      { key: 0, name: "否" }
    ],
  }
]);
const columns = [
  {
    title: "门店ID",
    dataIndex: "storeId",
    key: "storeId",
  },
  {
    title: "门店代码",
    dataIndex: "storeCode",
    key: "storeCode",
  },
  {
    title: "门店名称",
    dataIndex: "storeName",
    key: "storeName",
  },
  {
    title: "门店类型",
    dataIndex: "storeTypeDesc",
    key: "storeTypeDesc",
  },
  {
    title: "操作",
    key: "action",
    fixed: 'right',
    width: 300,
    scopedSlots: { customRender: 'action' },
  },
];
const tableData = ref([{ id: 1 }]);
const pagination = ref({
  showSizeChanger: true,
  total: 0,
  showQuickJumper: true,
  current: 1,
  pageSize: 10,
  showTotal: detailTotal => `共 ${detailTotal} 条`,
  onChange: (current, pageSize) => {
    form.value.size = pageSize;
    pagination.value.pageSize = pageSize;
    getStorePageList(current);
  },
});

// 获取条件
const querySelectScreenData = list => {
  list.forEach(item => {
    form.value[item.key] = item.value;
  });
};
// 点击确认条件筛选
const screenConfirm = e => {
  querySelectScreenData(e);
};
const toDetail = id => {
  router.push(`/memberDetail?id=${id}`);
}
</script>

<style lang="less" scoped>
.card {
  padding: 20px 24px;

  .btns {
    margin-bottom: 16px;

    &:hover {
      position: relative;
      z-index: 100;
    }

    .ant-btn {
      margin-left: 16px;
    }
  }
}
</style>